<template>
  <!-- 查询表格数据 -->
  <div class="TableWrapper">
    <!-- 选择设备 -->
    <section class="section">
      <div class="sectionTop">
        <h3>数据列表<span>*CO浓度单位为mg/m³ 其他颗粒物浓度单位为μg/m³ ，温度单位为°C，湿度单位为%</span></h3>

        <div class="searchGroup">
          <!-- 日期 年-月-日 -->
          <a-range-picker @change="onChangeDate"
                          :model="mode2"
                          :default-value="[moment(ajaxParam.start, dateFormat), moment(ajaxParam.end, dateFormat)]"
                          :disabled-date="disabledDate">
            <a-icon slot="suffixIcon"
                    type="calendar" />
          </a-range-picker>

          <a-button type="primary"
                    class="marginLeft16"
                    @click="searchClick">
            查询
          </a-button>

          <!-- <i class="line"></i> -->

          <!-- <a class="hrefBtn">多选</a> -->

          <!-- <a class="hrefBtn"
             @click="download">下载</a> -->

        </div>

      </div>

      <!-- <div class="sectionMsg">
        <p>
          <a-icon class="txtIcon"
                  type="info" />
          已选择<b class="txtBlue">{{selectedRowKeys.length}}</b>项
          <span> 数据量总计：<b class="txtBlack">{{data.length}}条</b></span>
        </p>
        <p class="txtBtn"
           @click="selectedEmpty">清空</p>
      </div> -->

      <!-- 表格 :row-selection="{selectedRowKeys: selectedRowKeys,onChange: onSelectChange}" -->
      <!-- :default-current="1"
      :pagination="pagination"
      show-size-changer
      show-quick-jumper -->

      <div class="sectionCont">
        <a-table :columns="columns"
                 :loading="loading"
                 :data-source="data"
                 :total="total"
                 :default-current="1"
                 :pagination="pagination"
                 show-size-changer
                 show-quick-jumper
                 @change="onChange">
          <!-- <a slot="name" slot-scope="text">{{ text }}</a> -->
        </a-table>
      </div>
    </section>

  </div>
</template>

<script>
import moment from 'moment'
import Com from '../../../common/js/com.js'
import MixinSD from '../../../store/sd/mixinsSd.js'
export default {
  mixins: [MixinSD],
  props: ['sbJson'],
  data () {
    return {
      mode2: ['month', 'month'],
      dateFormat: 'YYYY-MM-DD',
      total: '', // 数据总数
      columns: [],
      //   data: [],
      loading: true,
      tableData: [],
      // selectedRowKeys: [], /* 选中此处可配置默认列 */
      pagination: {
        defaultPageSize: 10, // 默认的每页条数
        // showTotal: total => '', // 用于显示数据总量和当前数据顺序
        showSizeChanger: true, // 是否可以改变 pageSize
        pageSizeOptions: ['10'], // 指定每页可以显示多少条
        onShowSizeChange: function (current, pageSize) { this.pageSize = pageSize },
        showQuickJumper: true // 是否可以快速跳转至某页
      },
      ajaxParam: {
        start: '',
        end: ''
      }
    }
  },
  created () {
    var start = Com.getBeforeDate(40, 'date')
    var end = Com.getBeforeDate(0, 'date')
    this.ajaxParam.start = start
    this.ajaxParam.end = end
    this.searchClick() // 条件栏查询 + 获取表格数据
  },
  methods: {
    moment,
    disabledDate (current) {
      return current && current > moment().endOf('day') // 不能今天之后的日期
    },
    onChangeDate: function (date, dateString) { // 日均值日期选择
      const num = Com.dateDiff(dateString[0], dateString[1])
      if (num > 366) {
        this.$message.warning('最多只可以选择一年！')
      } else {
        this.ajaxParam.start = dateString[0]
        this.ajaxParam.end = dateString[1]
      }
    },
    onChange (pageNumber) { // 翻页
      // console.log('Page: ', pageNumber)
    },
    searchClick () { // 条件栏查询 + 获取表格数据
      this.getDeviceLogList()
    },
    getDeviceLogList: function () {
      const liTable = this.sbJson
      const ts = Com.stringTime(new Date())
      const code = (liTable.code).toString()
      var data = {
        account: window.localStorage.getItem('account'),
        codes: code,
        datetype: 'D',
        download: 1,
        limit: 10,
        max_time: this.ajaxParam.end,
        min_time: this.ajaxParam.start,
        page: 1,
        token: window.localStorage.getItem('token'),
        ts
      }

      const that = this
      this.getDeviceLogListSD(data).then(function (value) {
        const result = value.data.data
        that.total = value.data.meta.total_count
        that.tableData = result.list

        const columns = result.params.map(item => ({ key: item.name, dataIndex: item.name, title: item.name }))
        columns.unshift({ key: 'typename', dataIndex: 'typename', title: '设备类型名称' })
        columns.unshift({ key: 'dname', dataIndex: 'dname', title: '设备名称' })
        columns.push({ key: 'time', dataIndex: 'time', title: '更新时间' })
        that.columns = columns
        that.loading = false
        // that.getData(result, liTable, value.data.meta.total_count, that)
      })
    },
    getData: function (result, liTable, totalCount, that) {
      //   const columns = result.params.map(item => ({ key: item.name, dataIndex: item.name, title: item.name }))
      //   columns.unshift({ key: 'typename', dataIndex: 'typename', title: '设备类型名称' })
      //   columns.unshift({ key: 'dname', dataIndex: 'dname', title: '设备名称' })
      //   columns.push({ key: 'time', dataIndex: 'time', title: '更新时间' })
      //   that.columns = columns
      //   that.loading = false
      //   var dataSource
      //   if (totalCount === 0) {
      //     dataSource = []
      //   } else {
      //     dataSource = result.list.map((item, index) => {
      //       Object.keys(item).forEach(key => { // 后端传null node写入会有问题
      //         if (item[key] === null) {
      //           item[key] = ''
      //         }
      //         if (Array.isArray(item[key])) {
      //           item[key] = item[key].join(',')
      //         }
      //         item.typename = (liTable.typename)
      //         item.dname = (liTable.dname)
      //         item.key = index
      //       })
      //       return item
      //     })
      //   }
      //   console.log(dataSource)
      //   that.data = dataSource
    }
  },
  computed: {
    data: function () {
      const liTable = this.sbJson
      const result = this.tableData
      var dataSource
      if (this.total === 0) {
        dataSource = []
      } else {
        if (result.length > 0) {
          dataSource = result.map((item, index) => {
            Object.keys(item).forEach(key => { // 后端传null node写入会有问题
              if (item[key] === null) {
                item[key] = ''
              }
              if (Array.isArray(item[key])) {
                item[key] = item[key].join(',')
              }
              item.typename = (liTable.typename)
              item.dname = (liTable.dname)
              item.key = index
            })
            return item
          })
        }
      }
      return dataSource
    }
  }
}
</script>

<style lang="less" scoped>
.TableWrapper {
  height: 100%;
  .section {
    height: 100%;
    background-color: #fff;
    border-radius: 0.12rem;

    .sectionTop {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0.16rem 0.32rem 0.24rem 0.32rem;

      h3 {
        font-size: 0.16rem;
        font-weight: bold;
        color: rgba(0, 0, 0, 0.85);
      }

      .searchGroup {
        text-align: right;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        min-width: 300px;

        .line {
          width: 0.01rem;
          height: 0.14rem;
          background-color: #e9e9e9;
          display: inline-block;
          margin-left: 0.16rem;
        }

        .hrefBtn {
          font-size: 0.14rem;
          text-decoration: underline;
          color: #437ede;
          margin-left: 0.16rem;
        }
      }
    }

    .sectionMsg {
      background: rgba(190, 215, 255, 0.2);
      border: 0.01rem solid #bed7ff;
      border-radius: 0.02rem;
      font-size: 0.14rem;
      color: rgba(0, 0, 0, 0.65);
      padding: 0.09rem 0.17rem;
      display: flex;
      align-content: center;
      justify-content: space-between;
      margin: 0 0.24rem 0.16rem 0.24rem;
      p {
        margin: 0;

        span {
          padding-left: 0.1rem;
        }

        .txtIcon {
          color: #fff;
          width: 0.15rem;
          height: 0.15rem;
          background-color: #437ede;
          border-radius: 50%;
          font-size: 0.12rem;
          text-align: center;
          line-height: 0.15rem;
          padding-top: 0.01rem;
          box-sizing: border-box;
          margin-right: 0.08rem;
          vertical-align: middle;
          margin-top: -0.03rem;
        }

        .txtBlue {
          color: #437ede;
          padding: 0 0.04rem;
        }

        .txtBlack {
          color: rgba(0, 0, 0, 0.75);
        }

        &.txtBtn {
          color: #437ede;
          cursor: pointer;
        }
      }
    }

    .sectionCont {
      padding: 0.24rem;
      padding-top: 0;
      padding-bottom: 0;
    }
  }
}

.timeGroup > span {
  font-size: 0.14rem;
  color: rgba(0, 0, 0, 0.65);
  padding: 0 0.1rem;
}

/deep/ .ant-table-tbody > tr > td {
  padding: 0.14rem;
}
@media (max-width: 1024px) {
  .ant-calendar-picker {
    width: 65%;
    text-align: left;
  }
  .TableWrapper .section .sectionMsg p .txtIcon {
    width: 10px;
    height: 10px;
  }
}
</style>
